<template>
  <div>
    <h3>答辩分组信息</h3>
    <a-card class="card" :bordered="false">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="答辩日期">
              <a-input disabled v-model="data.dbrq" />
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="答辩地点">
              <a-input disabled v-model="data.dbdd" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-alert class="card" message="查询待参加答辩的学生" type="info" />
    <a-card class="card" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="学生类别">
                <!-- <a-input disabled v-model="data.xslbmc" /> -->
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.xslbm">
                  <a-select-option v-for="i in TYPE0075" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item> 
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="所在院系">
                <!-- <a-input disabled v-model="data.yxmc" /> -->
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.ssyxm" @change="handleSelectYx">
                  <a-select-option v-for="i in selectYxConfig" :key="i.id" :value="i.dwh">{{ i.dwh+'-'+i.dwmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="所在专业">
                <!-- <a-input disabled v-model="data.zymc" /> -->
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.sszym">
                  <a-select-option v-for="i in selectZyConfig" :key="i.zyh" :value="i.zyh">{{ i.zyh+'-'+i.zymc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="所在年级">
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.sznj">
                  <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:24}" :xl="{span:24}" style="text-align:center;padding-bottom: 10px;">
              <a-button type="primary" @click="handleLoadWait(true)">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table ref="table" size="default" rowKey="key" :columns="takeColumns" :loading="takeLoading" :dataSource="takeStudent" :pagination="this.pagination" @change="handleTableChange" >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template slot="operation" slot-scope="text, record, index">
          <a @click="handleAdd(record,index)" v-if="record.addStop">添加</a>
          <span v-else > 已添加</span>
        </template>
      </a-table>
      <!-- <STable ref="table" size="default" rowKey="id" :columns="takeColumns" :data="loadData">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template slot="operation" slot-scope="text, record, index">
          <template v-for="i,idx in checkedStudent">
            <a @click="handleAdd(record,index)"  v-if="i.xh==record.xh">添加</a>
            <span v-else > 已添加</span>
          </template>
        </template>
      </STable> -->
    </a-card>
    <a-alert class="card" message="已选择答辩的学生列表" type="info" />
    <a-card class="card" :bordered="false">
      <a-table size="default" rowKey="key" :columns="haveColumns" :loading="loading" :dataSource="checkedStudent" :pagination="false">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template slot="operation" slot-scope="text, record, index">
          <a @click="handleDelete(record,index)">删除</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script>
import { STable } from '~'
import { mapState } from 'vuex'

export default {
  components: {
    STable,
  },
  props: {
    editVisible: {
      default: false
    },
    data: {
      default: function() {
        return {
          dbrq: '',
          dbdd: ''
        }
      }
    }
  },
  data() {
    return {
      takeStudent:[],
      checkedStudent: [],
      loading: false,
      takeLoading:false,
      parameter:{
        pageNum:1,
        pageSize:10,
      },
      pagination:{
        total:0,
        current:1
      },
      // 条件配置
      selectYxConfig: [], //院系
      selectZyConfig: [], //专业 
      queryParam: {},
      takeColumns: [{
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '学号',
          dataIndex: 'xh'
        },
        {
          title: '姓名',
          dataIndex: 'xm'
        },
        {
          title: '所属院系',
          dataIndex: 'ssyxmc'
        },
        {
          title: '所属专业',
          dataIndex: 'sszymc'
        },
        {
          title: '年级',
          dataIndex: 'sznj'
        },
        {
          title: '导师',
          dataIndex: 'dsxm'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        }
      ],
      haveColumns: [{
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '学号',
          dataIndex: 'xh'
        },
        {
          title: '姓名',
          dataIndex: 'xm'
        },
        {
          title: '所属院系',
          dataIndex: 'ssyxmc'
        },
        {
          title: '所属专业',
          dataIndex: 'sszymc'
        },
        {
          title: '年级',
          dataIndex: 'sznj'
        },
        {
          title: '导师',
          dataIndex: 'dsxm'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        parameter.pageNum = parameter.pageNo
        let params = Object.assign(this.queryParam, parameter)
        return this.$api.degree.pleaWaitStudent(params).then(res => {
          return {
            data: res.data.rows,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            totalPage: Math.ceil(res.data.total / parameter.pageSize),
            totalCount: res.data.total
          }
        })
      },
    }
  },
  watch: {
    data(val) {
      if (val.id) {
        this.handleInit();
      }
    }
  },
  computed: {
    ...mapState({
      TYPE0075: state => state.app['TYPE0075'], // 学生类别
      TYPE0126: state => state.app['TYPE0126'] // 年级
    })
  },
  created(){
    this.initSelectMenu();
    this.handleInit();
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectYxConfig = res[0].data
      })
    },
    //加载分组下学生
    handleInit() {
      let val = this.data;
      if (val.id) {
        this.$set(this.queryParam,"yx",val.ssyxm)
        this.$set(this.queryParam,"zy",val.sszym)
        this.$set(this.queryParam,"xslbm",val.xslbm)
        this.loading = true;
        this.$api.degree.pleaGroupStudent({
          dbfzxxId: val.id
        }).then(res => {
          this.checkedStudent = res.data;
          this.loading = false;
          this.handleLoadWait(true);
        })
      }
    },
    //表格页码变更
    handleTableChange(pagination){
      this.parameter.pageNum = pagination.current;
      this.handleLoadWait(); 
    },
    //加载待答辩的学生
    handleLoadWait(init){
      if (typeof init == 'boolean'&&init) {
        this.parameter = {
          pageNum:1,
          pageSize:10,
        }
      }
      this.takeLoading = true;
      let params = Object.assign(this.queryParam, this.parameter)
      this.$api.degree.pleaWaitStudent(params).then(res => {
        this.takeStudent = res.data.rows.map(e=>{
          e.addStop = true;
          for (let i =0; i<this.checkedStudent.length; i++) {
            if (this.checkedStudent[i].xh==e.xh) {
              e.addStop = false;
              break;
            }
          }
          return e
        })
        this.pagination.total = res.data.total;
        this.pagination.current = this.parameter.pageNum;
        this.takeLoading = false;
        })
    },
    //选择院系
    handleSelectYx(code) {
      this.selectZyConfig = [];
      this.$set(this.queryParam, 'sszym', '')
      this.$api.base.majorAll({ lsdwh: code }).then(res => {
        this.selectZyConfig = res.data;
      })
    },
    //删除
    handleDelete(record, idx) {
      if (this.checkedStudent.length === 1) {
        return this.$message.warn('至少要有一个学生')
      }
      this.checkedStudent.splice(idx, 1)
      // this.$api.degree.pleaGroupDelStudent(record.id).then(()=>{
      //   this.$message.success('删除成功');
      // })
    },
    //添加
    handleAdd(record,idx){
      for (let i =0; i<this.checkedStudent.length; i++) {
        if (this.checkedStudent[i].xh==record.xh) {
          return;
        }
      }
      record.addStop = false;
      this.checkedStudent.push(Object.assign({},record,{
        dbfzxxId:this.data.id
      }))
    }
  }
}

</script>
